<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags/form" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>java在线网盘系統-后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctx}/static/layui/css/layui.css" media="all">
    <script src="${ctx}/static/layui/layui.js"></script>
</head>
<body style="padding:30px;height: 100%;">
<blockquote class="layui-elem-quote" style="text-align: center;">
    根据分类显示云网盘文件信息
</blockquote>
<table class="layui-table">
    <tr class="layui-bg-blue">
        <th></th>
        <th>文件名</th>
        <th>文件类型</th>
        <th>大小</th>
        <th>上传时间</th>
        <th>删除</th>
    </tr>
    <c:forEach var="list" items="${requestScope.fileList }">
        <tr>
            <td><a href="download?file=${list.id }&folder=${list.fatherFolder.id}"><img
                    src="/cloud/images/download.png" alt="download"/></a></td>
            <td class="showDetail" path="readFile?file=${list.id }&folder=${list.fatherFolder.id}">${list.name}</td>
            <td>${list.fileType }</td>
            <td>${list.size } KB</td>
            <td>${list.uploadTime }</td>
            <td><a href="delete?file=${list.id }&folder=${list.fatherFolder.id}"><img
                    src="/cloud/images/delete.png"
                    alt="delete"/></a></td>
        </tr>
    </c:forEach>
</table>

<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    //定义layui的变量
    var $;
    var layer;
    var element;
    var form;
    layui.use(['element', 'layer', 'jquery', 'form'], function () {
        element = layui.element;
        layer = layui.layer;
        $ = layui.jquery;
        form = layui.form;
        //绑定详情点击事件
        $(".showDetail").click(function () {
            var path = $(this).attr("path");
            var cc = "<h1>文件类型不支持预览</h1>"
            if ("${type}" == ("photo")) {
                cc = "<img src='AAAA' width='100%' />".replace("AAAA", path);
            }
            if ("${type}" == ("movie")) {
                cc = "<video src='AAAA' width='98%'   controls   ></video>".replace("AAAA", path);
            }
            if ("${type}" == ("music")) {
                cc = "<audio src='AAAA'  width='100%'  controls   ></audio>".replace("AAAA", path);
            }
            layer.open({
                offset: '100px', //设置弹出窗口的位置 上边距100px
                type: 1,  //弹出类型
                skin: 'layui-layer-molv', //样式类名
                title: '文件预览',
                anim: 2,    //弹出窗口使用的动画
                area: ['700px', '620px'],  //设置弹出窗口的大小 宽度,高度
                shadeClose: true, //开启遮罩关闭
                content: cc  //加载内容路径
            });
        })
    });
</script>
<style>
    video {
        display: block;
        margin: 10px auto;
    }
</style>
</body>
</html>
